<template>
	<view>


		<view class="" hover-class="none" hover-stop-propagation="false">

		</view>
		
		
		<transition name="slide">
			<!-- 导航栏列表 -->
			<view class="zhanshi">
				<view class="" @click="addnovelindex(1,0,0)">
					{{zhanshi}}添加小说【作废】
				</view>
				<view class="" @click="shijians">
					添加事件
				</view>
				<view class="" @click="tianjia">
					添加人物
				</view>
		
				<view class="xuanze">
					<view class="show1">
						<text @click="dianjixiaoshi">选择小说：</text>
						<picker @change="bindPickerChange_novel" :value="index0" :range="novelarray">
							<view class="uni-input">{{novelarray[index0]}}</view>
						</picker>
					</view>
					<view class="show1">
						<!-- 选择类型：<picker @change="bindPickerChange" :value="index1" :range="twoarray">
		     				<view class="uni-input">{{twoarray[index1]}}</view>
		     			</picker> -->
						<text @click="dianjixiaoshi">默认样式：</text>
						<radio-group @change="onRadioChange">
							<label class="radio">
								<radio value="shijian" checked="true" />事件
							</label>
							<label class="radio">
								<radio value="renwu" />人物
							</label>
							<label class="radio">
								<radio value="nianfen" />年份
							</label>
						</radio-group>
		
					</view>
		
					<view class="show1" v-show="show_yangshi == 'renwu'">
						<text @click="dianjixiaoshi">人物姓名：</text>
						<picker @change="bindPickerChange_name" :value="index2" :range="personarray">
							<view class="uni-input">{{personarray[index2]}}</view>
						</picker>
					</view>
					<view class="show1" v-show="show_yangshi == 'renwu'">
						<text @click="dianjixiaoshi">选择岁数：</text><input type="number"
							:placeholder="placeholder_chooseage" v-model="ageNumber" @keydown.enter="shuruage"> 岁
					</view>
		
				</view>
			</view>
		</transition>
		<!-- 显示排序列表 -->
		
		


		<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMoreData" >
			<!-- 显示数据列表 -->
			<view v-if="show_yangshi === 'shijian'">
				<!-- 显示为事件的内容 -->
				<view v-for="(item, index) in shijianlist" :key="index" class="listitem">
					<view class="zhu">
						<view class="biaoqian" :style="{ backgroundColor: item.dengji === 1 ? 'yellow' : item.dengji === 2 ? '#999' : '' }">
							{{item.dengji}}
						</view>
						<view class="time">
							<view class="year">
								{{item.year}}年
							</view>
							<view class="riqi">
								{{item.mouth}}月{{item.day}}日
							</view>
						</view>
						<view class="contain" @click="toshijian(item)">
							<view class="title">
								{{item.title}}
							</view>
							<view class="more">
								>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="show_yangshi === 'renwu' && renwu_detail === 0">
				<!-- 显示为人物的内容 -->
				<view v-for="(item,index) in personlists" :key="index">
					<!-- {{item.name}} -->
					<view class="zhu2">
						<view class="kong">
						</view>
						<view class="dengji" :style="{ backgroundColor: item.grade === '神' ? 'yellow' : item.grade === '魔' ? '#333' : '', color: item.grade === '魔' ? 'white' : '' }">
						  {{ item.grade }}
						</view>
						<view class="contain" @click="torenwu(item)">
							<view class="name">
								<view class="ming">
									姓名：{{item.name}}
								</view>
								<view class="niming">
									称呼：{{item.title}}
								</view>
							</view>
							<view class="time">
								出生：{{item.birth | firstFourDigits }}年{{ item.birth | fifthAndSixthDigits }}月{{ item.birth | lastTwoDigits }}日
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="show_yangshi === 'renwu' && renwu_detail === 1" class="showperson">
				<view class="zhu" @click="torenwu(current_person)">
					<view class="dengji">
						{{current_person.grade}}
					</view>



					<view class="personshow">
						<view class="zuo">
							<view class="img">
								<view class="imgs">
									<image :src="current_person.presonimg"></image>
								</view>
							</view>
							<view class="year">
								{{current_person.name}}
							</view>
						</view>
						<view class="you">
							<view class="name">
								阳寿：{{current_person.age}} 岁
							</view>
							<view class="age">
								生辰：{{current_person.birthyear}} 年
							</view>
							<view class="age">
								忌辰：{{current_person.dieyear}} 年
							</view>
							<view class="title">
								名誉：{{current_person.title}}
							</view>
						</view>
					</view>
				</view>


			</view>
			<view v-else-if="show_yangshi === 'renwu' && renwu_detail === 2" class="showperson">
				<view class="zhu" @click="torenwu(current_person)">
					<view class="dengji">
						{{current_person.grade}}
					</view>
					<view class="personshow">
						<view class="zuo">
							<view class="img">
								<view class="imgs">
									<image :src="current_person.presonimg"></image>
								</view>
							</view>
							<view class="year">
								{{current_person.name}}
							</view>
						</view>
						<view class="you">
							<view class="name">
								当前年纪：{{ageNumber}} 岁
							</view>
							<view class="age">
								当前年份：{{current_year}} 年
							</view>
							<view class="title">
								名誉：{{current_person.title}}
							</view>
						</view>
					</view>
				</view>


				<!-- 			<view v-for="(item,index) in stageslist" :key="index" class="zhanshis">
					{{ item.stage}}
					<view v-for="(items,index) in item.data" :key="index">
						{{items.name}}
					</view>
				</view> -->
				<view v-for="(stageItem, stageIndex) in stageslist" :key="stageIndex" class="zhanshis">
					<view class="stage">
						{{ stageItem.stage }}
					</view>
					<view v-for="(dataItem, dataIndex) in stageItem.data" :key="dataIndex" class="contains"
						@click="torenwu(dataItem)">
						<view class="dengji">
							{{ dataItem.grade}}
						</view>
						<view class="age">
							{{ dataItem.current_age}} 岁
						</view>
						<view class="name">
							{{ dataItem.name}}
						</view>
						<view class="title">
							{{ dataItem.title}}
						</view>
					</view>
				</view>






			</view>
			<view class="nianfen" v-else-if="show_yangshi == 'nianfen'">
				<h3>请输入年份：</h3>
				<view class="xuanzeshuru">
					<view class="kong">

					</view>
					<input type="number" v-model="inputyear" placeholder="请输入年份:" />
					<view class="kong">
					
					</view>
					<button class="nianfen-button" @click="getInputNumber">确定</button>
					<view class="kong">
					
					</view>
				</view>

				<view v-for="(stageItem, stageIndex) in stageslist" :key="stageIndex" class="zhanshis">
					<view class="stage">
						{{ stageItem.stage }}
					</view>
					<view v-for="(dataItem, dataIndex) in stageItem.data" :key="dataIndex" class="contains"
						@click="torenwu(dataItem)">
						<view class="dengji">
							{{ dataItem.grade}}
						</view>
						<view class="age">
							{{ dataItem.current_age}} 岁
						</view>
						<view class="name">
							{{ dataItem.name}}
						</view>
						<view class="title">
							{{ dataItem.title}}
						</view>
					</view>
				</view>
			</view>


			<!-- 加载更多提示 -->
			<view v-if="showLoadMore" class="jiazaiclass">{{jiazai}}</view>
		</scroll-view>

	<!-- 	<view class="iskong">
			暂无数据！！
		</view> -->

		<!-- 显示居中弹窗 ///////////////////////////////////////////////////////////////////////////-人物展示-->
		<!-- 普通弹窗 -->


		<!-- 显示居中弹窗 添加人物-->
		<!-- 普通弹窗 -->
		<uni-popup ref="tianjia" background-color="#fff" @change="change" class="fuchuang">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<h3>添加人物：</h3>
				<form>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.name" placeholder="姓名"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.presonimg"
						placeholder="人物图片链接:"></uni-easyinput>
					<button @click="addrenwuimage">添加人物图片</button>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="tianjias.dangqianyear"
						placeholder="几几年"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="tianjias.dangqianage"
						placeholder="多少岁"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.briqi"
						placeholder="出生几月几日-0418"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.driqi"
						placeholder="死亡几月几日-0418"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="tianjias.age"
						placeholder="阳寿:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.grade"
						placeholder="等级[神,魔]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.title"
						placeholder="名誉称号['-'隔开]"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="tianjias.sex"
						placeholder="性别[1男0女]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.nature"
						placeholder="性格['-'隔开]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="tianjias.novel"
						placeholder="小说"></uni-easyinput>

					<button type="button" @click="submitForm2">提交</button>
				</form>
			</view>
		</uni-popup>
		<!-- 显示居中弹窗 筛选-->
		<!-- 普通弹窗 添加事件-->
		<uni-popup ref="shijians" background-color="#fff" @change="change" class="fuchuang">
			<h3>添加事件：</h3>

			<uni-notice-bar single text="添加事件前请确保小说和人物已添加,否则输入无效!" />

			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<form>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.year"
						placeholder="年份:"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.mouth"
						placeholder="月份:"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.day"
						placeholder="日:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.title"
						placeholder="标题:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.contain"
						placeholder="内容:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.temp"
						placeholder="关联人物['-'隔开]:"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.dengji"
						placeholder="等级:[数字1-10]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.image"
						placeholder="图片连接:"></uni-easyinput>
					<button @click="addshijianimage">添加事件图片</button>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.novel"
						placeholder="率属小说:"></uni-easyinput>

					<button type="button" @click="submitForm">提交</button>

				</form>
			</view>
		</uni-popup>
		<view class="xuanfuanniu" @click="dianji">
			选
		</view>
	</view>


</template>
<script>
	export default {
		components: {},
		 filters: {
		    firstFourDigits(value) {
		      return value.toString().substring(0, 4);
		    },
		    fifthAndSixthDigits(value) {
		      return value.toString().substring(4, 6);
		    },
		    lastTwoDigits(value) {
		      return value.toString().slice(-2);
		    }
		  },
		data() {
			return {
				// iskong: false,
				inputyear: 0,
				bianhua: 0,
				stageslist: [],
				img: 'https://wx4.sinaimg.cn/mw2000/0085hC9mly8gyel2f16yoj30hs0hsmxz.jpg',
				current_year: 'null',
				current_person: {},
				renwu_detail: 0, //0 单选人物  1 +选择了具体的人物 - 改名 2 +选择了时间显示【需要显示年份】
				placeholder_chooseage: '请输入年份',
				age_up: 0,
				age_dome: 0,
				ageNumber: '',
				jiazai: "加载中...",
				i: 0,
				i2: 0,
				shijianlistnum: null,
				//事件的数据列表
				shijianlist: [],
				//下拉数据列表
				dataList: [], // 数据列表
				showLoadMore: false, // 是否显示加载更多提示
				//是否展示筛选框，0不展示，默认不展示
				zhanshi: 0,
				//帅选
				title: 'picker',
				novelarray: [],
				show_yangshi: 'shijian',
				selectedItem: 'option1', // 默认选中的选项
				personarray: ['所有人'],
				timearray: ['10', '20', '30', '40'],
				index0: 0,
				index1: 0,
				index2: 0,
				index3: 0,
				// 添加人物
				tianjias: {
					briqi: '',
					driqi: '',
					dangqianyear: null,
					dangqianage: null,
					presonimg: '',
					name: '',
					birth: 2,
					die: 2,
					grade: '',
					title: [],
					age: '',
					sex: '',
					nature: [],
					novel: '不填写默认为当前小说',
					birthyear: '22',
					dieyear: '22'

				},
				// 居中弹出层
				type: 'center',

				current_index: 0,
				// 帅选
				shijian: {
					title: '',
					year: null,
					mouth: null,
					day: null,
					dengji: null,
					contain: '',
					relationship: [0], //关联人物
					image: '', //图片连接
					id: '0',
					temp: '',
					novel: '不填写默认为当前小说'
				},
				//抽屉
				showRight: false,
				showLeft: false,
				//下拉框

				//下面导航栏


				activeTab: 0,
				//人物数据
				personlists: [],
				//小说索引数据
				novel_index: [],
				novel_index_show: []
			}
		},

		// computed: {
		// 	personarray() {
		// 		let stringArray = ["所有人"];
		// 		stringArray.push(...this.novel_index_show[this.index0].personname)
		// 		return stringArray;
		// 	}
		// },
		onReady() {},
		//初始化函数，看好不是method
		onLoad() {
			this.onloadsss(0)
		},
		methods: {
			onloadsss(e){
				
				
				
				var that = this;
				//加载事件
				
				// 获取事件的数量读取次数
				uniCloud.callFunction({
					name: "getshijianlistnum"
				}).then(res => {
					console.log("读取事件数量数据");
					console.log(res.result);
					that.shijianlistnum = res.result;
				})
				
				if(e == 0)
				{
					this.loadshijianData();
					uni.setNavigationBarTitle({
						title: '理想国小说'
					});
					console.log(333);
					//获取小说的整体索引数据-novel_index_show
					uniCloud.callFunction({
						name: "get_novel_index"
					}).then(res => {
						console.log("读取小说原始的索引数据");
						console.log(res.result.data);
						that.novel_index = res.result.data;
						//数据渲染前端
						that.xuanran_name()
					})
					
				}
				if(e == 1)
				{
					this.i = 0;
					this.shijianlist = []
					this.loadshijianData();
					uni.stopPullDownRefresh()
				}
				
			},
			xuanran_name() {
				let arr = this.novel_index;
				
				let result = arr.reduce((acc, item) => {
					let existingItem = acc.find(i => i.novel === item.novel);
					if (existingItem) {
						existingItem.personname.push(item.personname);
					} else {
						acc.push({
							novel: item.novel,
							personname: [item.personname]
						});
					}
					return acc;
				}, []);
				this.novel_index_show = result;
				this.personarray.push(...this.novel_index_show[0].personname);
				console.log("读取小说改良后的索引数据");
				console.log(this.novel_index_show);
				
				
				for (let item of this.novel_index_show) {
					this.novelarray.push(item.novel)
				}
				console.log("小说列表");
				console.log(this.novelarray);
			},
			getInputNumber() {
				const number = Number(this.inputyear);
				console.log('输入的数字是：', number);
				this.loadrenwuData(3, 0, number);
				this.current_year = number;

			},
			//当用户输入年份
			shuruage() {

				if (this.index2 == 0) {
					uni.showToast({
						title: '请先输入人物！！',
						icon: 'none',
						duration: 2000
					});
					return; // 提前结束函数执行
				}
				console.log(this.ageNumber);
				let age = parseInt(this.ageNumber);
				let currentyear = this.personlists[0].birthyear + age;
				this.current_year = currentyear.toString();
				// console.log(this.personlists[0].birthyear + "当前年为" + currentyear + "年");
				// console.log(this.personlists[0].birthyear, currentyear, this.age_up, age);
				// this.index2 = e.detail.value;
				if (this.ageNumber < 0 || this.ageNumber > this.age_up) {
					uni.showToast({
						title: '输入错误：年龄不合法 ！！！',
						icon: 'none',
						duration: 2000
					});
					return; // 提前结束函数执行
				}
				this.renwu_detail = 2;
				this.i2 = 0;
				this.personlists = [];
				// this.loadrenwuData(1,this.personarray[e.detail.value]);
				this.zhanshi = 0;
				this.loadrenwuData(2, this.personarray[this.index2], currentyear);
				//关闭加载更多
				// this.loadrenwuData(1, this.personarray[this.index2]);
				// this.i2 = 0;
				// this.personlists = [];
				//单独获取这个人物的信息

				//this.loadrenwuData(2,this.personarray[this.index2],this.inputNumber);
			},
			//点击关闭导航栏
			dianjixiaoshi() {
				this.zhanshi = 0;
			},
			//上传输入的索引数据，小说索引 1手动添加数据  2 自动添加数据
			addnovelindex(conmand, novel, arrayname) {
				console.log(novel, arrayname);
				if (conmand == 1) {
					let that = this;
					uni.showModal({
						title: '添加小说索引',
						placeholderText: '请输入：小说名-人物名',
						editable: true,
						success: function(res) {
							if (res.confirm) {
								let arr = res.content.split('-');
								if (arr.length !== 2) {
									uni.showModal({
										title: '输入格式错误',
										content: '请输入正确的格式：小说名-人物名',
										showCancel: false,
										success: function() {
											that.addnovelindex(1, 0,
												0); // 重新调用 showModal 方法，让用户重新输入
										}
									});

									return;
								}

								// // 继续处理输入的内容
								let obj = {
									novel: arr[0],
									personname: arr[1]
								}
								// let obj2 = {
								// 	novel: arr[0],
								// 	personname: [arr[1]]
								// }
								that.novel_index.push(obj);
								that.novelarray.push(arr[0]);
								console.log(that.novel_index);
								uniCloud.callFunction({
									name: "add_novel_index",
									data: obj
								}).then(res => {
									console.log("添加数据成功");
									that.zhanshi = 0;
								})

							}
						}
					});
				}
				if (conmand == 2) {



				}
			},
			//跳转到事件详细页面
			toshijian(e) {
				console.log(e);
				uni.navigateTo({
					//url: '/pages/shijianxiangxi/shijianxiangxi',
					url: '/pages/shijianxiangxi/shijianxiangxi?a=' + encodeURIComponent(JSON.stringify(e))
				});
			},
			//跳转到事件详细页面
			torenwu(e) {
				console.log(e);
				uni.navigateTo({
					//url: '/pages/shijianxiangxi/shijianxiangxi',
					url: '/pages/renwuxiangqing/renwuxiangqing?a=' + encodeURIComponent(JSON.stringify(e))
				});
			},
			dianji() {
				this.zhanshi = !this.zhanshi;
				this.$refs.shijians.close('center')
				this.$refs.tianjia.close('center')

			},
			//加载事件
			loadshijianData() {
				let that = this;
				let a;
				if (this.novelarray[this.index0]) {
					a = this.novelarray[this.index0];
				} else {
					a = "理想国小说";
				}
				console.log(a);
				//读取事件的列表
				uniCloud.callFunction({
					name: "getshijianlist",
					data: {
						i: this.i,
						MAX_LIMIT: 8,
						novel: a
					}
				}).then(res => {
					console.log("读取事件列表数据");
					console.log(res.result.data);
					this.shijianlist.push(...res.result.data);
					this.i++;
				})

			},
			//加载人物 0，获取小说中的所有数据 ，后面两个没有关系，小说从 this.novelarray[this.index0]获取
			// 1 获取指定的小说中的单个人物的数据   name表示那个人物   
			// 2 获取人物包含的年龄的范围的数据   逻辑没有写
			loadrenwuData(command, name, age) {
				let that = this;
				let a = this.novelarray[this.index0];
				console.log("测试数据：command,name,age");
				console.log(command, name, age);
				//读取事件的列表
				uniCloud.callFunction({
					name: "getrenwulist",
					data: {
						i: that.i2,
						MAX_LIMIT: 20,
						novel: a,
						command: command,
						name: name,
						age: age
					}
				}).then(res => {


					try {
						// 可能会抛出异常的代码
						// 例如，调用一个不存在的函数
						if (res.result.data.length == 0) {
							that.jiazai = "没有数据了！！！"
						}
					} catch (error) {
						// 捕获异常后的处理代码
						console.error('捕获到异常：', error);
					}
					console.log("读取人物2列表数据");
					console.log(res.result.data);

					that.personlists.push(...res.result.data);
					that.i2++;

					if (command == 1) {
						//下拉框点击人物才执行的
						that.age_up = that.personlists[0].age;
						console.log(that.age_up);
						console.log(that.personlists[0]);
						that.current_person = that.personlists[0];
						that.placeholder_chooseage = '请输入年份:上限为' + that.age_up;
						that.ageNumber = '';
					}

					if (command == 2) {
						//下拉框点击人物才执行的
						const arr = res.result.data;
						const stages = that.groupByAge(arr);


					}
					if (command == 3) {
						//下拉框点击人物才执行的
						console.log(arr);
						const arr = res.result.data;

						const stages = that.groupByAge(arr);
					}

				})

			},
			checkObject(obj) {
				for (let key in obj) {
					if (!obj[key]) {
						uni.showToast({
							title: key + '不能为空',
							icon: 'none'
						})
						return false
					}
				}
				return true
			},
			//封装的一个数组工具函数
			groupByAge(arr) {
				for (let i = 0; i < arr.length; i++) {
					const birth = arr[i].birthyear;
					const current_year = this.current_year;
					const current_age = current_year - birth;

					arr[i].current_age = current_age;
				}

				console.log(arr);


				const stages = [{
						stage: "童年",
						data: []
					},
					{
						stage: "少年",
						data: []
					},
					{
						stage: "青少年",
						data: []
					},
					{
						stage: "青年",
						data: []
					},
					{
						stage: "中年",
						data: []
					},
					{
						stage: "老年",
						data: []
					}
				];

				for (let i = 0; i < arr.length; i++) {
					const age = arr[i].current_age;

					if (age < 6) {
						stages[0].data.push(arr[i]);
					} else if (age < 12) {
						stages[1].data.push(arr[i]);
					} else if (age < 18) {
						stages[2].data.push(arr[i]);
					} else if (age < 35) {
						stages[3].data.push(arr[i]);
					} else if (age < 60) {
						stages[4].data.push(arr[i]);
					} else {
						stages[5].data.push(arr[i]);
					}
				}
				console.log(stages);
				this.stageslist = stages;
				console.log("stageslist的数据：");
				console.log(this.stageslist);

			},
			// 下拉底部加载 -- 加载更多数据,结合前端，然后他联系了加载数据 / 人物
			loadMoreData() {
				// 显示加载更多提示
				this.showLoadMore = true;
				if (this.show_yangshi == 'shijian') {
					if ((this.i * 8) > this.shijianlistnum) {
						//已经加载完毕
						this.jiazai = "没有数据了！！！"
						return;
					}
					// 加载更多数据
					this.loadshijianData();
				} else if (this.show_yangshi == 'renwu' && this.renwu_detail == 0) {
					if (this.jiazai == "没有数据了！！！") {
						return;
					}
					// 加载更多数据
					this.loadrenwuData(0, 0, 0);
				} else {
					this.showLoadMore = false;
				}
			},
			//筛选，单选框改变，【带操作】
			onRadioChange(event) {
				this.show_yangshi = event.target.value; // 更新选中的选项
				if (event.target.value == 'shijian' && this.bianhua == 1) {
					this.i = 0;
					//清空数据
					this.shijianlist = [];
					this.loadshijianData();
					this.bianhua = 0;

				}
				if (event.target.value == 'renwu') {
					this.i2 = 0;
					//清空数据
					this.personlists = [];
					this.loadrenwuData(0, 0, 0);
					//重新索引回到所有人
					this.index2 = 0;
				}
				if (event.target.value == 'nianfen') {
					this.i2 = 0;
					//清空数据
					this.personlists = [];
					//this.loadrenwuData(3, 0, 0);
					this.zhanshi = 0;
					this.showLoadMore = false;

				}

			},
			//下拉框选择小说
			bindPickerChange_novel: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				if (this.index0 != e.detail.value) {
					this.bianhua = 1;
				}
				this.index0 = e.detail.value;
				// 获取小说
				let novel = this.novelarray[e.detail.value];
				this.personarray = ['所有人'];
				this.personarray.push(...this.novel_index_show[this.index0].personname)
				uni.setNavigationBarTitle({
					title: novel
				});

				// 检测人物还是事件还是年份    然后重新选择数据
				if (this.show_yangshi == 'shijian') {
					this.i = 0;
					//清空数据
					this.shijianlist = [];
					this.loadshijianData();

				} else if (this.show_yangshi == 'renwu') {
					this.i2 = 0;
					//清空数据
					this.personlists = [];
					this.loadrenwuData(0, 0, 0);
					this.index2 = 0;
					this.renwu_detail = 0;
					this.placeholder_chooseage = '请输入年龄';
				} else {

				}


			},
			//添加人物图片
			addrenwuimage() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				let that = this;
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量，默认为 9
					sizeType: ['original', 'compressed'], // 可以指定选择原图或压缩图，默认为 ['original', 'compressed']
					sourceType: ['album', 'camera'], // 可以指定选择图片的来源，默认为 ['album', 'camera']
					success: function(res) {
						// 选择图片成功
						let tempFilePaths = res.tempFilePaths; // 图片的临时文件路径数组
						console.log('选择的图片路径:', tempFilePaths);
						const name = res.tempFiles[0].name // 选择图片的名称.后缀名
						console.log(name);
						uniCloud.uploadFile({
							filePath: tempFilePaths[0],
							cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
						}).then(res => {
							console.log(res.fileID)
							that.tianjias.presonimg = res.fileID;
							uni.hideLoading()
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});
						})
					},
					fail: function(res) {
						uni.hideLoading()
						if (res.errMsg === 'chooseImage:fail cancel') {
							// 用户取消了选择图片，不执行任何操作
							uni.showToast({
								title: '选择图片失败，请重试',
								icon: 'none'
							})
							return
						}
						// 其他错误情况，弹出提示框提示用户
						uni.showToast({
							title: '选择图片失败，请重试',
							icon: 'none'
						})
					}
				});
			},
			//添加事件图片
			addshijianimage() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				let that = this;
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量，默认为 9
					sizeType: ['original', 'compressed'], // 可以指定选择原图或压缩图，默认为 ['original', 'compressed']
					sourceType: ['album', 'camera'], // 可以指定选择图片的来源，默认为 ['album', 'camera']
					success: function(res) {
						// 选择图片成功
						let tempFilePaths = res.tempFilePaths; // 图片的临时文件路径数组
						console.log('选择的图片路径:', tempFilePaths);
						const name = res.tempFiles[0].name // 选择图片的名称.后缀名
						console.log(name);
						uniCloud.uploadFile({
							filePath: tempFilePaths[0],
							cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
						}).then(res => {
							console.log(res.fileID)
							that.shijian.image = res.fileID;
							uni.hideLoading()
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});

						})
					},
					fail: function(err) {
						// 选择图片失败
						console.error('选择图片失败:', err);
					}
				});
			},

			//下拉框选择人物
			bindPickerChange_name: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index2 = e.detail.value;
				if (e.detail.value == 0) {
					this.renwu_detail = 0;
					this.placeholder_chooseage = '请输入年龄';
					this.i2 = 0;
					this.personlists = [];
					this.loadrenwuData(0, 0, 0);
				} else {
					this.i2 = 0;
					this.personlists = [];
					this.loadrenwuData(1, this.personarray[e.detail.value], 3);
					this.renwu_detail = 1;
				}


				// age_up:0;
				// age_dome:0;
				// 获取小说
				// 检测人物还是事件还是年份
				// 然后重新选择数据

			},
			nihao() {},
			type() {},
			toggle(type, a) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				console.log(a);
				this.current_index = a;
			},
			// 添加人物
			tianjia() {
				this.$refs.tianjia.open('center')

			},
			shijians() {
				this.$refs.shijians.open('center')

			},
			//居中弹出曾
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 添加事件
			submitForm() {
				let that = this;
				if (!this.checkObject(this.shijian)) {
					// 对象校验通过，继续执行后续操作
					return
				}
				this.shijian.id = this.shijian.year.toString() + this.shijian.mouth.toString() + this.shijian.day
					.toString();
				console.log(this.shijian.title);
				this.shijian.relationship = this.shijian.temp.split("-");
				console.log(this.shijian);
				let obj = this.shijian;
				
				if(this.tianjias.novel == '不填写默认为当前小说')
				{
					obj.novel = this.novelarray[this.index0]
				}
				let novel = obj.novel;
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				// 查询这个novel
				let have = this.novel_index_show.some(item => item.novel === novel);
				if (!have) {
					//
					//this.addnovelindex(1,novel, this.shijian.relationship);	
					console.log("不存在小说" + novel);
					uni.hideLoading();
					this.$refs.shijians.close('center')
					this.zhanshi = 0;

					uni.showToast({
						title: '请先添加小说：' + novel,
						icon: 'none'
					});
					setTimeout(() => {
						this.$refs.tianjia.open('center')
					}, 1000); // 延时 500 毫秒


					return;
				} else {
					const index = this.novel_index_show.findIndex(item => item.novel === novel);
					console.log('索引位置是：', index); // 输出 3
					this.novel_index_show[index].personname
					const a = this.novel_index_show[index].personname;
					const b = this.shijian.relationship;
					const notFoundItems = b.filter(item => !a.includes(item));
					console.log('不存在于数组 a 中的项：', notFoundItems); // 输出 [1]
					if (notFoundItems.length > 0) {
						// 数组不为空，执行逻辑

						uni.hideLoading();
						this.$refs.shijians.close('center')
						this.zhanshi = 0;

						uni.showToast({
							title: '请先添加人物：' + notFoundItems.join(', '),
							icon: 'none',
							mask: true // 显示遮罩层
						});
						setTimeout(() => {
							this.$refs.tianjia.open('center')
						}, 1000); // 延时 500 毫秒


						return;
						// 在这里添加你的逻辑代码
					} else {
						// 
						
						uniCloud.callFunction({
							name: "tianjiashijian",
							data: obj
						}).then(res => {
							console.log(res);
							that.$refs.shijians.close('center')
							uni.hideLoading();
							uni.showToast({
								title: '添加成功，请重新刷新显示',
								icon: 'success'
							});
							//关闭上导航栏	
							that.zhanshi = 0;
						})

					}
				}

			},
			//添加人物提交
			submitForm2() {
				
			
				let that = this;
				if (!this.checkObject(this.tianjias)) {
					// 对象校验通过，继续执行后续操作
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				
				
				

				let chusheng = this.tianjias.dangqianyear - this.tianjias.dangqianage;
				let siwang = parseInt(chusheng) + parseInt(this.tianjias.age);
				console.log(siwang);
				this.tianjias.birth = parseInt(chusheng + this.tianjias.briqi);
				this.tianjias.die = parseInt(siwang.toString() + this.tianjias.driqi);
				console.log(this.tianjias.birth, this.tianjias.die);

				let num = this.tianjias.birth;
				const birthyear = Math.floor(num / 10000); // 提取年份
				const birthmonth = Math.floor((num % 10000) / 100); // 提取月份
				const birthday = num % 100; // 提取日期

				num = this.tianjias.die;
				const dieyear = Math.floor(num / 10000); // 提取年份
				const diemonth = Math.floor((num % 10000) / 100); // 提取月份
				const dieday = num % 100; // 提取日期

				this.tianjias.birthyear = birthyear;
				this.tianjias.dieyear = dieyear;

				//将title字符串转化为数组-后台实现

				let obj = this.tianjias;
				if(this.tianjias.novel == '不填写默认为当前小说')
				{
					obj.novel = this.novelarray[this.index0]
				}
				console.log(obj);
				this.personlists.push(obj)
				let novel = this.tianjias.novel;
				console.log(novel);

				//将人物添加到人物库
				uniCloud.callFunction({
					name: "tianjiarenwu",
					data: obj
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
					that.$refs.tianjia.close('center')
					that.zhanshi = 0;
					//向数组push人物 kkk
					// this.personarray = ['所有人'];
					that.personarray.push(that.tianjias.name)
				}).catch(err => {
					console.error(err);
					uni.hideLoading();
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				});
				//将人物添加到索引库
				let obj1 = {
					novel: this.tianjias.novel,
					personname: this.tianjias.name
				}
				
				this.novel_index.push(obj1);
				this.xuanran_name()

				uniCloud.callFunction({
					name: "add_novel_index",
					data: obj1
				}).then(res => {
					console.log("添加数据成功");
					that.zhanshi = 0;
				})
			},
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.onloadsss(1)
			
			
		
		}
	}
</script>

<style lang="scss" lang="scss">
	.xuanfuanniu {
		z-index: 999;
		height: 50px;
		width: 50px;
		font-size: 25px;
		color: #fff;
		background-color: #23DA36;
		text-align: center;
		line-height: 50px;
		position: fixed;
		bottom: 100px;
		right: 50px;

		border-radius: 50%;
	}

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}






	.xuan {
		display: flex;

		.xuan1 {
			flex: 1;
		}
	}

	.form-item {
		margin-bottom: 10px;
	}

	.label {
		display: inline-block;
		width: 80px;
		text-align: right;
		margin-right: 10px;
	}

	.bg-white {
		background-color: #fff;
	}

	.bg-gray {
		background-color: #f2f2f2;
	}

	.zhanshi {
	
		
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #000;
		
		background-color: #ffffff;

		view {

			width: 33%;

			text-align: center;
		}

		.xuanze {
			width: 100%;


			.show1 {
				background-color: orange;
				width: 100%;
				display: flex;
				margin: 2px 0;

				picker {
					width: 80%;
					// border-bottom: 1px solid #000;
				}
			}
		}



	}

	.slide-enter-active,
	.slide-leave-active {
		transition: transform 0.5s, opacity 0.5s;
	}

	.slide-enter,
	.slide-leave-to {
		transform: translateY(-30%);
		opacity: 0;
	}

	.scroll-view {

		height: 87vh;

		.jiazaiclass {
			background-color: limegreen;
			text-align: center;
		}
	}

	.listitem {

		border-bottom: 1px solid #000;
		margin-top: 10px;

		.xia {
			text-align: center;
		}

		.zhu {

			background-color: #F5F5F5;
			display: flex;
			height: 60px;
			align-content: center;

			.biaoqian {
				flex: 1;
				background-color: #499;
				text-align: center;
				line-height: 60px;
			}

			.time {
				border-right: 5px solid #000;
				flex: 2;

				.year {
					padding-top: 10px;
					font-weight: 800;
					font-size: 15px;
					text-align: center;
				}

				.riqi {
					text-align: center;
				}
			}

			.contain {
				flex: 7;
				display: flex;
				align-items: center;

				.title {
					flex: 9;
					padding-left: 10px;
					font-size: 20px;
					font-family: 'kaiti'
				}

				.more {
					flex: 1;
				}
			}
		}
	}

	.zhu2 {
		background-color: #e0e7c8;
		font-family: 'kaiti';
		display: flex;
		margin-top: 15px;

		.kong {
			width: 5px;
			margin-left: 5px;
			height: 45px;
			background-color: #000;
		}

		.dengji {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: yellow;
		}

		.contain {
			flex: 10;
			display: flex;

			.name {
				flex: 8;
				padding-left: 10px;

				.ming {
					font-size: 15px;
					font-weight: 800;
				}

				.niming {
					font-size: 12px;
				}
			}

			.time {
				
				flex: 8;
				display: flex;
				align-items: center;

			}
		}

	}

	.showperson {
		float: none;
		clear: both;
		background-color: #c6ddc4;

		// display: flex;
		// flex-direction: column;
		.zhu {

			font-family: 'kaiti';
			position: relative;
			height: 200px;

			width: 100%;
			background-color: #bdd7ba;
			border-bottom: 10px solid #708b6e;

			.dengji {

				color: #23DA36;
				position: absolute;
				top: 10px;
				right: 10px;
				font-size: 40px;
			}

			.zuo {
				float: left;
				width: 50%;
				flex: 1;


				.img {
					height: 150px;

					display: flex;
					align-items: center;
					justify-content: center;

					.imgs {

						height: 140px;
						width: 140px;
						border-radius: 50%;


						overflow: hidden;
						background-color: #ccc;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}

				.year {

					text-align: center;
					font-size: 30px;
					height: 50px;
					line-height: 40px;
				}
			}

			.you {
				height: 160px;
				padding-top: 40px;
				float: left;
				width: 50%;

				line-height: 30px;
				font-size: 20px;
			}
		}

		.zhanshis {

			color: #101410;
			width: 100%;

			font-family: "楷体", KaiTi, serif;
			margin-top: 20px;
			background-color: #bdd7ba;

			.stage {
				font-size: 25px;
				border-bottom: 3px solid #90b28d
			}

			.contains {
				display: flex;
				line-height: 50px;

				align-content: center;
				font-size: 15px;
				text-align: center;
				margin-bottom: 5px;
				border-bottom: 3px solid #50634f;

				.dengji {
					flex: 2;
					font-size: 20px;
					border-right: 3px dashed #50634f;

				}

				.age {
					flex: 3;
				}

				.name {
					flex: 5;
					font-size: 20px;
				}

				.title {
					flex: 6;
				}
			}

		}

	}

	.fuchuang {}

	.nianfen {
		background-color: #bdd7ba;

		.xuanzeshuru {
			margin-top: 10px;
			display: flex;
			background-color: pink;
			align-items: center;

			.kong {
				width: 10%;
			}

			input {
				border: 1px solid #000;


				border-radius: 4px;
				padding: 8px;
				width: 200px;
				outline: none;
				font-size: 14px;
			}

			.nianfen-button {
				background-color: #4CAF50;
				height: 35px;
				width: 30%;
				border: none;
				color: white;
				/* 将padding的值设置为6px 12px */
				text-align: center;
				text-decoration: none;
				display: inline-block;
				font-size: 14px;
				border-radius: 4px;
				cursor: pointer;
				transition: background-color 0.3s ease;
			}

			.nianfen-button:hover {
				background-color: #45a049;
			}
		}

		.zhanshis {
			width: 100%;
			font-family: "楷体", KaiTi, serif;
			margin-top: 20px;

			.stage {
				font-size: 25px;
				border-bottom: 3px solid #90b28d
			}

			.contains {
				display: flex;
				line-height: 50px;

				align-content: center;
				font-size: 15px;
				text-align: center;
				margin-bottom: 5px;
				border-bottom: 3px solid #50634f;

				.dengji {
					flex: 2;
					font-size: 20px;
					border-right: 3px dashed #50634f;
				}

				.age {
					flex: 3;
				}

				.name {
					flex: 5;
					font-size: 20px;
				}

				.title {
					flex: 6;
				}
			}

		}

		.popup-content {}

	}

	button {
		height: 20px;
		font-size: 10px;
		width: 50%;
		background-color: lawngreen;
		margin: 10px auto;
	}

	.uni-mt-5 {
		height: 23px;
		color: red;
	}
</style>